<template lang="pug">
.cp-provider-view
  el-dialog(:title="title", :visible="visible", @close="close")
    el-tabs.pr-tabs(v-model="activeTabIndex", @tab-click="handleTab")
      el-tab-pane(label="基本", name="0")
      el-tab-pane(label="联系人", name="1")
      el-tab-pane(label="财务信息", name="2")
      el-tab-pane(label="资质", name="3")
      el-tab-pane(label="受控物料", name="4")
    .c-pop-tab.tab-base(v-show="tabShows[0]")
      el-row(:gutter="20")
        el-col(:span="24")
          strong 【 编号 】
          span {{ formData.vendorId }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 名称 】
          span {{ formData.name }}
        el-col(:span="12")
          strong 【 创建组织 】
          span {{ formData.createDeptLevel1Name }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 营业期限 】
          span {{ formData.businessLimit }}
        el-col(:span="12")
          strong 【 创建部门 】
          span {{ formData.createDeptLevel2Name }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 状态 】
          span {{ formData.status | compare-list(statusSelect) }}
        el-col(:span="12")
          strong 【 创建人 】
          span {{ formData.createUser | compare-list(empSelect) }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 国家 】
          span {{ formData.country | compare-list(nationSelect) }}
        el-col(:span="12")
          strong 【 城市 】
          span {{ formData.city | compare-list(countrySelect) }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 通讯地址 】
          span {{ formData.mailingAddress }}
        el-col(:span="12")
          strong 【 邮编 】
          span {{ formData.zip }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 主页 】
          span {{ formData.homePage }}
        el-col(:span="12")
          strong 【 行业 】
          span {{ formData.industry | compare-list(industrySelect) }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 成立日期 】
          span {{ formData.vendorCreateDate | date-locale }}
        el-col(:span="12")
          strong 【 法人代表 】
          span {{ formData.corporateRepresentative }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 类别 】
          span {{ formData.vendorcategory | compare-list(vendorCateSelect) }}
        el-col(:span="12")
          strong 【 分级 】
          span {{ formData.vendorgrade | compare-list(vendorGradeSelect) }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 性质 】
          span {{ formData.characters | compare-list(vendorChatacterSelect) }}
        el-col(:span="12")
          strong 【 规模 】
          span {{ formData.scale | compare-list(scaleSelect) }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 注册资金 】
          span {{ formData.registeredCapital }}
        el-col(:span="12")
          strong 【 生产许可证 】
          span {{ formData.prdAllowNo }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 经营许可证 】
          span {{ formData.businessCertificate }}
        el-col(:span="12")
          strong 【 注册地址 】
          span {{ formData.registeredAddress }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 备案号 】
          span {{ formData.recordNo }}
        el-col(:span="12")
          strong 【 统一社会信用代码 】
          span {{ formData.businessRegistration }}
    .c-pop-tab.tab-contact(v-show="tabShows[1]")
      .pr-view-table
        el-table(:data="formData.vendorContactList", size="mini")
          el-table-column(align="center", show-overflow-tooltip, type="index", label="序号")
          el-table-column(align="center", show-overflow-tooltip, prop="name", label="联系人")
          el-table-column(align="center", show-overflow-tooltip, prop="position", label="职务")
            template(slot-scope="scope")
              span {{ scope.row.position | compare-list(positionSelect) }}
          el-table-column(align="center", show-overflow-tooltip, prop="mobile", label="手机")
            template(slot-scope="scope")
              a(:href="`tel:${scope.row.mobile}`") {{ scope.row.mobile }}
          el-table-column(align="center", show-overflow-tooltip, prop="landLine", label="座机")
          el-table-column(align="center", show-overflow-tooltip, prop="fax", label="传真")
          el-table-column(align="center", show-overflow-tooltip, prop="email", label="邮箱")
          el-table-column(align="center", show-overflow-tooltip, prop="remark", label="备注")
    .c-pop-tab.tab-fund(v-show="tabShows[2]")
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 结算币种 】
          span {{ split(formData.settlementCurrency) | compare-arr(currencySelect) }}
        el-col(:span="12")
          strong 【 结算方式 】
          span {{ formData.settlement | compare-list(settleSelect) }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 付款条件 】
          span {{ formData.paymentTerms | compare-list(paymentSelect) }}
        el-col(:span="12")
          strong 【 国家 】
          span {{ formData.country | compare-list(nationSelect) }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 开户银行 】
          span {{ formData.bank }}
        el-col(:span="12")
          strong 【 税务登记号 】
          span {{ formData.taxID }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 发票类型 】
          span {{ formData.invoiceType | compare-list(invoiceTypeSelect) }}
        el-col(:span="12")
          strong 【 默认税率 】
          span {{ formData.defaultTaxRate | compare-list(defaultTaxRateSelect) }}
      el-row(:gutter="20")
        el-col(:span="12")
          strong 【 账户名称 】
          span {{ formData.bankAccountName }}
        el-col(:span="12")
          strong 【 银行账号 】
          span {{ formData.bankAccountNo }}
      el-row(:gutter="20")
        el-col(:span="24")
          strong 【 备注 】
          span {{ formData.remark || '暂无' }}
    .c-pop-tab.tab-credit(v-show="tabShows[3]")
      .pr-view-table
        el-table(:data="formData.vendorCredentialsList", size="mini")
          el-table-column(align="center", show-overflow-tooltip, type="index", label="序号")
          el-table-column(align="center", show-overflow-tooltip, prop="credential", label="证书资质")
          el-table-column(align="center", show-overflow-tooltip, prop="credentialNo", label="证书编号")
          el-table-column(align="center", show-overflow-tooltip, prop="vaildDate", label="证书有效期")
          el-table-column(align="center", show-overflow-tooltip, prop="credentialFile", label="附件")
            template(slot-scope="scope")
              a(target="_blank", :href="scope.row.credentialFile") {{ scope.row.credentialFile }}
          el-table-column(align="center", show-overflow-tooltip, prop="skus", label="相关物料")
            template(slot-scope="scope")
              span {{ split(scope.row.skus) | compare-arr(materialSelect) }}
    .c-pop-tab.tab-materiel(v-show="tabShows[4]")
      .pr-view-table
        el-table(:data="formData.vendorSupplyList", size="mini")
          el-table-column(align="center", show-overflow-tooltip, type="index", label="序号")
          el-table-column(align="center", show-overflow-tooltip, prop="sku", label="内部编码")
          el-table-column(align="center", show-overflow-tooltip, prop="name", label="物料名称")
          el-table-column(align="center", show-overflow-tooltip, prop="manufacturer", label="品牌")
            template(slot-scope="scope")
              span {{ scope.row.manufacturer | compare-list(skuManSelect) }}
          el-table-column(align="center", show-overflow-tooltip, prop="specification", label="规格")
          el-table-column(align="center", show-overflow-tooltip, prop="skuUnit", label="单位")
            template(slot-scope="scope")
              span {{ scope.row.skuUnit | compare-list(unitSelect) }}
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'providerview',
  props: {
    title: {
      type: String,
      default: '查看供应商详情'
    },
    visible: Boolean,
    formData: Object
  },
  data() {
    return {
      activeTabIndex: '0',
      tabShows: [true, false, false, false],
      statusSelect: [
        { name: '启用', value: '0' },
        { name: '禁用', value: '1' }
      ]
    };
  },
  methods: {
    close () {
      this.$emit('close');
    },
    handleTab () {
      const tabShows = [false, false, false, false];
      tabShows[this.activeTabIndex] = true;
      this.tabShows = tabShows;
    },
    split (skus) {
      if (Array.isArray(skus)) {
        return skus;
      } else {
        return skus && skus.split(',');
      }
    }
  },
  computed: {
    ...mapGetters([
      'vendorChatacterSelect', 'vendorCateSelect',
      'vendorGradeSelect', 'scaleSelect', 'empSelect',
      'nationSelect', 'industrySelect', 'countrySelect', 'positionSelect',
      'settleSelect', 'paymentSelect', 'invoiceTypeSelect', 'currencySelect',
      'defaultTaxRateSelect', 'unitSelect', 'skuManSelect', 'materialSelect'
    ])
  },
  mounted () {}
};
</script>

<style lang="sass">
.cp-provider-view
  .el-dialog__body
    padding: 12px 28px 20px
  .el-tabs__item:focus.is-active.is-focus:not(:active)
    box-shadow: none
  .pr-tabs
    position: relative
    height: 40px
    background: white
    .el-tabs__header
      margin-bottom: 2px
  .c-pop-tab
    position: relative
    padding-top: 16px
  .tab-contact, .tab-credit, .tab-materiel
    padding-top: 8px
  .pr-view-table
    margin-bottom: 16px
    width: 100%
    table
      width: 100%!important
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
    .el-table__empty-block
      display: none
  .pr-pop-form
    .el-form-item
      width: 100%
      margin-right: 0
    .el-form-item__content
      width: calc(100% - 72px)
    .el-form-item__label
      text-align: left
    .el-select
      width: 100%
    .long-item
      .el-form-item__content
        width: calc(100% - 86px)
    .forever-item
      .el-form-item__content
        width: calc(100% - 128px)
  .el-row
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 12px
    &:nth-child(odd)
      background: #f5f5f5
    &:nth-child(even)
      background: beige
  strong
    display: inline-block
    font-weight: 400
    margin-right: 8px
</style>
